import React, { useReducer } from "react";

import "./App.scss"

const initialState = {count:0}

function reducer(state:{count:number}, action:{type:string}){
  switch(action.type){
    case "plus":
      return {count:state.count+1}
    case "minus":
      return {count:state.count-1}
    case "reset":
      return {count:0}
    default:
      throw new Error("Action type error")
  }
}

function Counter(){
  const [state, dispatch] = useReducer(reducer, initialState)

  const plus=()=>{
    dispatch({type: "plus"})
  }
  const minus=()=>{
    dispatch({type: "minus"})
  }
  const reset=()=>{
    dispatch({type: "reset"})
  }

  return (
    <>
      Count: {state.count}
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
      <button onClick={reset}>reset</button>
    </>
  )
}

function App() {
  return (
    <Counter />
  );
}

export default App;
